<template>
  <div class="AuditProducts">
    <!-- 填写内容 -->
    <div class="AuditProducts_input">
      <van-cell-group>
        <van-field v-model="data.proName" label="商品名称：" readonly />
        <van-field :value="(data.price/100).toFixed(2)" readonly label="商品原价" />
        <van-field
          v-model="data.content"
          rows="3"
          autosize
          readonly
          label="商品简介"
          type="textarea"
          show-word-limit
        />
      </van-cell-group>
    </div>
    <!-- 图片 -->
    <div class="AuditProducts_img">
      <h3>商品图片</h3>
      <ul>
        <li v-for="(item, index) in data.img" :key="index">
          <img :src="$base.baseImg + item" />
        </li>
      </ul>
    </div>
    <!-- 线上线下 -->
    <div class="AuditProducts_img">
      <van-radio-group v-model="data.online" disabled direction="horizontal">
        <van-radio :name="1" checked-color="#FF3F1A">线上</van-radio>
        <van-radio :name="0" checked-color="#FF3F1A">线下</van-radio>
      </van-radio-group>
    </div>
    <!-- 提交按钮 -->
    <van-row class="button">
      <van-col span="11">
        <van-button
          type="primary"
          color="#D2A166"
          round
          block
          size="normal"
          @click="auditProDetails(1)"
          >通过</van-button
        >
      </van-col>
      <van-col span="11" offset="2">
        <van-button
          type="default"
          @click="auditProDetails(2)"
          round
          block
          size="normal"
          >不通过</van-button
        >
      </van-col>
    </van-row>
    <!-- 弹窗 -->
    <van-dialog v-model="show" title="驳回理由" @confirm="noAuditMerchant">
      <van-field
        v-model="excuse"
        rows="4"
        autosize
        label="理由"
        type="textarea"
        maxlength="30"
        placeholder="请输入理由"
        show-word-limit
      />
    </van-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import {
  Field,
  Button,
  RadioGroup,
  Radio,
  Dialog,
  Col,
  Row,
  Toast,
} from "vant";
Vue.use(Dialog);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Button);
Vue.use(Field);
Vue.use(Col);
Vue.use(Row);
@Component({})
export default class AuditProducts extends Vue {
  private data = {};
  private show: boolean = false;
  private excuse: string = "";

  private mounted(): void {
    this.$common.getAuthToken(this.getProDetails);
  }
  // 获取商户详情
  private getProDetails(): void {
    this.$post(`proDetails`, { sku: Number(this.$route.params.id) }).then(
      (res: any) => {
        if (res.code == 0) {
          this.data = res.data;
        }
      }
    );
  }
  // 通过商户
  private auditProDetails(e: number) {
    if (e == 2) {
      this.show = true;
    } else {
      this.$post(`proCheck`, {
        sku: Number(this.$route.params.id),
        status: e,
        excuse: this.excuse,
      }).then((res: any) => {
        if (res.code == 0) {
          Toast.success("通过成功！");
          setTimeout(() => {
            this.$router.back();
          }, 1000);
        }
      });
    }
  }
  // 不通过确定
  private noAuditMerchant() {
    this.$post(`proCheck`, {
      sku: Number(this.$route.params.id),
      status: 2,
      excuse: this.excuse,
    }).then((res: any) => {
      if (res.code == 0) {
        Toast.success("驳回成功！");
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.AuditProducts {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  .AuditProducts_input {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #ffffff;
    margin-bottom: 30px;
  }
  .AuditProducts_img {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #ffffff;
    margin-bottom: 30px;
    padding: 30px;
    h3 {
      font-size: 30px;
      font-weight: 300;
      color: #000000;
      line-height: 2;
      box-sizing: border-box;
    }
    ul {
      list-style: none;
      overflow: hidden;
      li {
        width: 200px;
        height: 200px;
        float: left;
        margin-right: 10px;
        img {
          width: 100%;
          display: block;
        }
      }
    }
  }
  .button {
    position: fixed;
    width: 100%;
    padding: 20px;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #fff;
  }
}
</style>
